<style lang="less">
@import '../styles/menu.less';
</style>
<template>
    <div>
        <Menu ref="sideMenu" accordion :active-name="beforeName" :open-names="openNames" :theme="theme" width="auto" @on-select="changeMenu">
            <template v-for="item in menuList">
                <!-- 如果是一级菜单并设置了不一直显示 -->
                <template v-if="item.level == '1' && !item.showAlways">
                    <MenuItem v-if="item.children.length <= 1" :name="item.children[0].name" :key="'menuitem' + item.name">
                        <XIcon :type="item.children[0].icon || item.icon" :size="iconSize" :key="'menuicon' + item.name"></XIcon>
                        <span class="content-text" :key="'title' + item.name">{{ itemTitle(item.children[0]) }}</span>
                    </MenuItem>
                    <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">
                        <template slot="title">
                            <XIcon :type="item.icon" :size="iconSize"></XIcon>
                            <span class="content-text">{{ itemTitle(item) }}</span>
                        </template>
                        <template v-for="child in item.children">
                            <MenuItem :name="child.name" :key="'menuitem' + child.name">
                                <XIcon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></XIcon>
                                <span class="content-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
                            </MenuItem>
                        </template>
                    </Submenu>
                </template>
                <template v-else>
                    <Submenu :name="item.name" :key="item.name">
                        <template slot="title">
                            <XIcon :type="item.icon" :size="iconSize"></XIcon>
                            <span class="content-text">{{ itemTitle(item) }}</span>
                        </template>
                        <template v-for="child in item.children">
                            <MenuItem :name="child.name" :key="'menuitem' + child.name">
                                <XIcon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></XIcon>
                                <span class="content-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
                            </MenuItem>
                        </template>
                    </Submenu>
                </template>
            </template>
        </Menu>
    </div>
</template>

<script>
export default {
    name: 'sidebarMenu',
    data() {
        return {
            before: '',
            beforeName: ''
        };
    },
    props: {
        menuList: Array,
        iconSize: Number,
        theme: {
            default: 'darkblue'
        },
        openNames: {
            type: Array
        }
    },
    watch: {
        '$route.path'() {
            if (this.$route.path.split('/') <= 2) {
                this.beforeName = this.$route.name;
            }
        },
        openNames() {
            if (this.openNames[0] === 'otherRouter') {
                this.openNames[0] = this.before;
            } else {
                this.before = this.openNames[0];
            }
        }
    },
    methods: {
        changeMenu(active) {
            this.$emit('on-change', active);
        },
        handleSelect(name) {
            this.$emit('on-select', name);
        },
        itemTitle(item) {
            if (typeof item.title == 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        },
        getOpenedNamesByActiveName(name) {
            return this.$route.matched.map(item => item.name).filter(item => item !== name);
        }
    },
    updated() {
        this.$nextTick(() => {
            if (this.$refs.sideMenu) {
                this.$refs.sideMenu.updateOpened();
            }
        });
    }
};
</script>
